<template>
<div class="top">
    <modalAvatar @on-change="currentUser" ></modalAvatar>
    <modalCurrentUserPassword></modalCurrentUserPassword>
    <b-navbar toggleable="lg" fixed type="dark" variant="dark">
        <b-container fluid>
            <b-navbar-brand to="/">未来社区</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" class="justify-content-between" is-nav>

                <b-navbar-nav>
                    <b-nav-item to="/">首页</b-nav-item>
                    <b-nav-item to="/topClass">话题</b-nav-item>
                    <b-nav-item to="/usercenter">我参与话题</b-nav-item>
                </b-navbar-nav>

                <b-navbar-nav>
                    <b-nav-item-dropdown>
                        <!-- Using 'button-content' slot -->
                        <template v-slot:button-content class="justify-content-between">
                            <b-img class="user-face" :src="Headportrait.avatar" thumbnail v-bind="mainProps"></b-img><span>{{ Headportrait.username }}</span>
                        </template>
                        <b-dropdown-item to="usercenter">个人中心</b-dropdown-item>
                        <b-dropdown-item href="#" v-b-modal.modal-CurrentUserPassword>修改用户密码</b-dropdown-item>
                        <b-dropdown-item href="#" v-b-modal.modal-avatar>上传头像</b-dropdown-item>
                        <b-dropdown-item to="/personaldata">个人资料</b-dropdown-item>
                        <b-dropdown-item href="#" @click="Logout">退出登陆</b-dropdown-item>

                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-container>
    </b-navbar>
</div>
</template>

<script>
import modalAvatar from '@/components/modal-avatar';
import modalCurrentUserPassword from '@/components/modal-CurrentUserPassword';
export default {

    name: "top",
    components: {
        modalAvatar,
        modalCurrentUserPassword
    },
    data() {
        return {
            userInfo: {
                author: 'http://localhost:1020/img/005.8837238e.jpg',
                username: '秋墨殇'
            },
            Headportrait: {

            },
            mainProps: {
                blank: false,
                width: 35,
                height: 35,
            },
            userProfile:null,
        }
    },

    created() {
        this.currentUser()
    },
    methods: {
        Logout() {
            this.$userApi.userOut().then((res) => {
                console.log(res);
                this.$router.go(0);
            })
        },
        currentUser() {
            this.$userApi.currentUser().then((res) => {
                console.log(res.data);
                this.Headportrait = res.data
            })
        },

    }
}
</script>
